<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门升级</title>
</head>
<body>
<!--【需求】：将vue中定义的值展示到标签的内容体中-->
<div id="div">
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
</div>

<input type="button" value="修改name的值" onclick="changeName()">
<input type="button" value="修改age的值" onclick="changeAge()">
<input type="button" value="修改name和age的值" onclick="changeNameAndAge()">
</body>
<script src="../js/vue.js"></script>
<script>
    let vue = new Vue({
        //定义接管的区域
        el:"#div",
        //定义变量
        data:{
            name:"小王",
            age:30
        }
    });
    function changeAge() {
        vue.age=38;
    }
    function changeName() {
        vue.name="享完"
    }
    function changeNameAndAge() {
        vue.name="扎根",
        vue.age=1
    }
</script>
</html>